import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import { useLocation } from 'react-router-dom'
import { getArticleDetail } from '../../../utils/find'
import { LeftOutline } from 'antd-mobile-icons'

interface DetailType {
  title?: string
  createTime: string
  author?: string
  viewCount: number
  coverImg?:string
  summary?:string
}
export default function ArticleInfo() {
  const artId = useLocation().search.split("?id=")[1]
  //明细数据
  const [artDetail, setArtDetail] = useState<DetailType>()
  //获取文章明细请求
  const getDetailList = async () => {
    let res: resType = await getArticleDetail(artId)
    // console.log(res);
    if (res.code === 20000) {
      setArtDetail(res.data.productArticle)
    }
  }
  //返回上一页
  const backBtn=()=>{
    window.history.back()
    
  }
  useEffect(() => {
    getDetailList()
  }, [])
  return (
    <div className={styles.detail_box}>
      {artDetail &&
      <>
        <div className={styles.detail_title}>
          <LeftOutline color='#ffffff' fontSize={20} onClick={backBtn}/>
          <span>{artDetail.title}</span>
        </div>
        <div className={styles.detail_content}>
          <h2>{artDetail.title}</h2>
          <p style={{display:'flex',justifyContent:'flex-end'}}>作者：{artDetail.author}</p>
          <p style={{display:'flex',justifyContent:'flex-end'}}>时间：{artDetail.createTime}</p>
          <p>概要描述：{artDetail.summary}</p>
          <img src={artDetail.coverImg
} alt="" />
        </div>
        </>
      } 

    </div>
  )
}
